<template>
  <Main :type="'form'">
    <Title :title="pageName" />

    <el-form ref="form" :model="form" :rules="form" label-width="130px">
      <el-form-item
        label="文章标题"
        prop="title"
        :rules="{
          required: true,
          message: '请输入文章标题',
          trigger: 'blur'
        }"
      >
        <el-input
          v-model="form.title"
          placeholder="请输入文章标题"
          size="medium"
          :maxlength="64"
          style=" width:50%;"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        label="文章副标题"
        prop="subhead"
        :rules="{
          required: true,
          message: '请输入文章副标题',
          trigger: 'blur'
        }"
      >
        <el-input
          v-model="form.subhead"
          type="textarea"
          :rows="3"
          placeholder="请输入文章副标题"
          :maxlength="120"
          size="medium"
          style="width:60%;"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        label="文章封面"
        prop="cover"
        :rules="{
          required: true,
          message: '请选择文章封面',
          trigger: 'blur'
        }"
      >
        <div>
          <div class="imgs">
            <img
              v-if="form.cover"
              :src="$store.state.qiniu + form.cover + $store.state.imgRotate"
              alt=""
            />
          </div>
          <el-button type="primary" @click="dialogImages = true"
            >选择图片</el-button
          >
        </div>
      </el-form-item>
      <el-form-item label="文章商品选择">
        <el-button
          type="primary"
          style="margin-bottom:10px;"
          :disabled="listData.length == 10"
          @click="
            dialogShop = true;
            dataJson.shopDataList = listData;
          "
          >选择商品</el-button
        >
        <Table v-if="listData.length >= 1" :data="listData" style="width:80%;">
          <el-table-column
            label="商品名称"
            align="center"
            property="goods_name"
          ></el-table-column>
          <el-table-column label="销售价格" align="center" property="address">
            <template slot-scope="scope">
              <span v-if="scope.row.low_goods_price == scope.row.up_goods_price"
                >￥{{ scope.row.low_goods_price }}</span
              >
              <span v-else
                >￥{{ scope.row.low_goods_price }} - ￥{{
                  scope.row.up_goods_price
                }}</span
              >
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="delStores(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </Table>
      </el-form-item>
      <el-form-item
        label="文章内容"
        prop="content"
        :rules="{
          required: true,
          message: '请输入文章内容',
          trigger: 'blur'
        }"
      >
        <rich-text-editor
          :text="form.content"
          :widths="'80%'"
          :heights="'100%'"
          @editorChange="editorChange"
        />
      </el-form-item>
    </el-form>

    <Footer>
      <el-button plain @click="$emit('out')">取 消</el-button>
      <el-button type="primary" @click="submit(0)">保存</el-button>
      <el-button type="primary" @click="submit(1)">保存并发布</el-button>
    </Footer>
    <images-material
      :dialog-images="dialogImages"
      :use-btn="true"
      :use-type="'img'"
      @close="closeImages"
    />
    <dialog-shop
      :dialog-visible="dialogShop"
      :data-json="dataJson"
      @close="close"
    />
  </Main>
</template>
<script>
import { ADDARTICLE, ARTICLEDATA } from "../service";

export default {
  components: {
    dialogShop: () => import("./component/dialogShop"),
    richTextEditor: r =>
      require.ensure(
        [],
        () => r(require("publicCom/richTextEditor/richTextEditor")),
        "richTextEditor"
      ),
    ImagesMaterial: r =>
      require.ensure([], () => r(require("publicCom/imgupdate")), "imgupdate")
  },
  props: {
    articleId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      pageName: "新建文章",
      listData: [],
      dialogImages: false,
      dialogShop: false,
      dataJson: {},
      form: {
        title: "",
        subhead: "",
        cover: "",
        apply_shop: "",
        content: ""
      }
    };
  },
  created() {
    if (this.articleId) {
      this.pageName = "编辑文章";
      this.getMsg();
    } else {
      this.pageName = "新建文章";
    }
  },

  methods: {
    editorChange: function(html) {
      this.form.content = html;
    },
    closeImages(file) {
      if (file) {
        this.form.cover = file.file_path;
      }
      this.dialogImages = false;
    },
    close(e) {
      this.dialogShop = false;
      if (!e) return;
      this.listData = e;
    },
    delStores(i) {
      this.listData.splice(i, 1);
    },
    async submit(status) {
      await this.$refs["form"].validate(valid => {
        if (valid) {
          let arr = [];
          this.listData.forEach(ele => {
            arr.push(ele.goods_id);
          });
          let applyShop = arr.join(",");
          let prams = {
            article_id: this.articleId,
            title: this.form.title,
            subhead: this.form.subhead,
            cover: this.form.cover,
            value: this.form.content,
            status,
            apply_shop: applyShop
          };
          ADDARTICLE(prams).then(({ code, msg }) => {
            if (code === 200) {
              this.$emit("out");
              this.$message.success(msg);
            } else {
              this.$message.error(msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    async getMsg() {
      await ARTICLEDATA({ article_id: this.articleId }).then(
        ({ code, data, msg }) => {
          if (code === 200) {
            this.form = {
              title: data.title,
              subhead: data.subhead,
              cover: data.cover,
              content: data.value
            };
            this.listData = data.apply_shop;
          } else {
            this.$message.error(msg);
          }
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.imgs {
  width: 40px;
  height: 40px;
  float: left;
  border: 1px solid #dcdfe6;
  margin-right: 10px;
  border-radius: 5px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
<style></style>
